<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: layout(~{::title}, ~{::content})}">
<head>
    <title th:text="${station.id != null ? '编辑站点' : '新增站点'} + ' - 废物回收管理系统'">编辑站点 - 废物回收管理系统</title>
</head>
<body>
    <div th:fragment="content">
        <!-- 返回按钮和标题 -->
        <div class="d-flex align-items-center mb-4">
            <a href="/stations" class="btn btn-outline-secondary me-3">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h2 class="mb-0" th:text="${station.id != null ? '编辑站点' : '新增站点'}">编辑站点</h2>
        </div>

        <div class="row">
            <!-- 左侧表单 -->
            <div class="col-md-8 mb-4">
                <div class="card">
                    <div class="card-body">
                        <form id="stationForm" th:action="@{${station.id != null ? '/stations/' + station.id : '/stations'}}" 
                              method="POST" th:object="${station}" class="needs-validation" novalidate>
                            
                            <!-- 基本信息 -->
                            <h5 class="card-title mb-4">基本信息</h5>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">站点名称 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name" 
                                           th:value="${station.name}" required maxlength="50">
                                    <div class="invalid-feedback">请输入站点名称</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="contactPhone" class="form-label">联系电话 <span class="text-danger">*</span></label>
                                    <input type="tel" class="form-control" id="contactPhone" name="contactPhone" 
                                           th:value="${station.contactPhone}" required pattern="^1[3-9]\d{9}$">
                                    <div class="invalid-feedback">请输入有效的手机号码</div>
                                </div>
                                <div class="col-12">
                                    <label for="address" class="form-label">详细地址 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="address" name="address" 
                                           th:value="${station.address}" required maxlength="200">
                                    <div class="invalid-feedback">请输入详细地址</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="businessHours" class="form-label">营业时间 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="businessHours" name="businessHours" 
                                           th:value="${station.businessHours}" required maxlength="50"
                                           placeholder="例如：周一至周日 09:00-18:00">
                                    <div class="invalid-feedback">请输入营业时间</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="status" class="form-label">营业状态</label>
                                    <select class="form-select" id="status" name="status">
                                        <option value="1" th:selected="${station.status == 1}">营业中</option>
                                        <option value="0" th:selected="${station.status == 0}">已关闭</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 可回收物品 -->
                            <h5 class="card-title mb-3 mt-4">可回收物品</h5>
                            <div class="mb-3">
                                <textarea class="form-control" id="acceptableItems" name="acceptableItems" 
                                          rows="3" required maxlength="500" th:text="${station.acceptableItems}"></textarea>
                                <div class="invalid-feedback">请输入可回收物品信息</div>
                                <div class="form-text">请列出该站点可以回收的物品类型，用逗号分隔</div>
                            </div>

                            <!-- 站点描述 -->
                            <h5 class="card-title mb-3">站点描述</h5>
                            <div class="mb-3">
                                <textarea class="form-control" id="description" name="description" 
                                          rows="4" maxlength="1000" th:text="${station.description}"></textarea>
                                <div class="form-text">请描述站点的特色、服务等信息</div>
                            </div>

                            <!-- 隐藏字段 -->
                            <input type="hidden" id="latitude" name="latitude" th:value="${station.latitude}">
                            <input type="hidden" id="longitude" name="longitude" th:value="${station.longitude}">

                            <!-- 提交按钮 -->
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>保存
                                </button>
                                <a href="/stations" class="btn btn-outline-secondary ms-2">取消</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 右侧地图 -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title mb-3">选择位置</h5>
                        <div id="map" style="height: 400px;" class="mb-3"></div>
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            在地图上点击选择站点位置，或者拖动标记调整位置
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block th:fragment="extraScripts">
        <!-- 百度地图API -->
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=${baiduMapKey}"></script>
        <script th:inline="javascript">
            // 表单验证
            (function() {
                const form = document.getElementById('stationForm');
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                });
            })();

            // 站点信息
            const stationData = {
                id: /*[[${station.id}]]*/ null,
                latitude: /*[[${station.latitude}]]*/ 39.915,
                longitude: /*[[${station.longitude}]]*/ 116.404
            };

            // 初始化地图
            const map = new BMap.Map('map');
            const point = new BMap.Point(stationData.longitude, stationData.latitude);
            map.centerAndZoom(point, 15);
            map.enableScrollWheelZoom();
            
            // 添加控件
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());

            // 添加标记
            const marker = new BMap.Marker(point, {
                enableDragging: true
            });
            map.addOverlay(marker);

            // 地址解析器
            const geoc = new BMap.Geocoder();

            // 更新坐标和地址
            function updateLocation(point) {
                document.getElementById('latitude').value = point.lat;
                document.getElementById('longitude').value = point.lng;
                
                geoc.getLocation(point, function(rs) {
                    if (rs) {
                        const address = document.getElementById('address');
                        if (!address.value) {
                            address.value = rs.address;
                        }
                    }
                });
            }

            // 地图点击事件
            map.addEventListener('click', function(e) {
                marker.setPosition(e.point);
                updateLocation(e.point);
            });

            // 标记拖动事件
            marker.addEventListener('dragend', function(e) {
                updateLocation(e.point);
            });

            // 地址搜索
            document.getElementById('address').addEventListener('change', function(e) {
                const address = e.target.value;
                if (address) {
                    geoc.getPoint(address, function(point) {
                        if (point) {
                            map.centerAndZoom(point, 16);
                            marker.setPosition(point);
                            updateLocation(point);
                        }
                    });
                }
            });
        </script>
    </th:block>
</body>
</html> 